<template>
  <div>
    <div class="container">
      <textarea v-model="markdownContent" class="input-area"></textarea>
      <div class="output-area" v-html="renderedMarkdown"></div>
    </div>
  </div>
</template>

<script>
import MarkdownIt from 'markdown-it';
import MarkdownItKatex from 'markdown-it-katex';
import 'katex/dist/katex.min.css';
import 'github-markdown-css';

export default {
  data() {
    return {
      markdownContent: ``
    };
  },
  computed: {
    processedContent() {
      return this.markdownContent
        .replace(/\\\[/g, '$$')
        .replace(/\\\]/g, '$$')
        .replace(/\\\(/g, '$')
        .replace(/\\\)/g, '$');
    },
    renderedMarkdown() {
      const md = new MarkdownIt().use(MarkdownItKatex);
      return md.render(this.processedContent);
    }
  }
};
</script>

<style>
.container {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.input-area {
  width: 45%;
  height: 80vh;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.output-area {
  width: 45%;
  height: 80vh;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow-y: auto;
}

.katex {
  font-size: 1.2em;
  line-height: 2;
}
</style>

